.theme-demo {
  padding: 0;
  min-height: calc(100vh - 112px); // 与ComponentRenderer保持一致
  
  // 紧凑型头部
  .theme-demo-header {
    margin-bottom: 16px; // 减少头部间距
  }
  
  // 统计卡片样式
  .ant-statistic {
    .ant-statistic-title {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      margin-bottom: 8px;
    }
    
    .ant-statistic-content {
      font-size: 20px;
      font-weight: 600;
    }
  }
  
  // 主题控制面板
  .ant-alert {
    border-radius: 8px;
    
    .ant-alert-description {
      margin-top: 8px;
      
      p {
        margin-bottom: 4px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  
  // 进度条样式
  .ant-progress {
    .ant-progress-bg {
      transition: all 0.3s ease;
    }
  }
  
  // 表格样式
  .ant-table {
    .ant-table-thead > tr > th {
      background: #fafafa;
      font-weight: 600;
    }
    
    .ant-table-tbody > tr:hover > td {
      background: #f5f5f5;
    }
  }
  
  // 时间线样式
  .ant-timeline {
    .ant-timeline-item {
      padding-bottom: 16px;
      
      .ant-timeline-item-content {
        p {
          margin-bottom: 4px;
          
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
  
  // 步骤条样式
  .ant-steps {
    .ant-steps-item {
      .ant-steps-item-description {
        color: rgba(0, 0, 0, 0.65);
        font-size: 12px;
      }
    }
  }
  
  // 标签样式
  .ant-tag {
    border-radius: 4px;
    margin: 2px 4px 2px 0;
    
    &:hover {
      transform: translateY(-1px);
      transition: transform 0.2s ease;
    }
  }
  
  // 卡片内嵌样式
  .ant-card-type-inner {
    background: #fafafa;
    border-radius: 8px;
    
    .ant-card-head {
      background: transparent;
      border-bottom: 1px solid #f0f0f0;
      
      .ant-card-head-title {
        font-size: 16px;
        font-weight: 600;
      }
    }
    
    .ant-card-body {
      padding: 20px;
    }
    
    ul {
      margin: 0;
      padding-left: 20px;
      
      li {
        margin-bottom: 8px;
        line-height: 1.6;
        color: rgba(0, 0, 0, 0.75);
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  
  // 响应式调整
  @media (max-width: 768px) {
    .ant-col {
      margin-bottom: 16px;
    }
    
    .ant-statistic {
      text-align: center;
    }
    
    .ant-card-type-inner {
      .ant-card-body {
        padding: 16px;
      }
    }
  }
}

// 深色主题样式
.theme-demo.theme-dark {
  .theme-status-card,
  .theme-actions-card,
  .theme-preview-card,
  .theme-features-card {
    .ant-card-head {
      border-bottom-color: #303030;
    }
  }
  
  .theme-preview-card {
    .ant-card {
      border-color: #303030;
      
      .ant-card-head {
        background: #1f1f1f;
        border-bottom-color: #303030;
      }
    }
  }
} 